<template>
  <Modal v-model:open="open" :title="title" @ok="onOk" :width="width">
    <iframe
      :src="`${iframeUrl}#toolbar=0`"
      width="100%"
      height="800px"
      frameBorder="0"
      scrolling="no"
      v-if="loading"
    ></iframe>
    <Spin v-else style="width: 100%; height: 800px; line-height: 800px"></Spin>
    <template #footer></template>
  </Modal>
</template>

<script setup lang="tsx">
import { Modal, Spin } from 'ant-design-vue';

const emit = defineEmits(['update:open']);
const open = defineModel<boolean>('open');

interface Props {
  loading?: boolean;
  iframeUrl: string;
  title?: string;
  width?: number | string;
}

const props = withDefaults(defineProps<Props>(), {
  title: '预览',
  loading: true,
  width: '60%',
});

const onOk = () => {
  emit('update:open', false);
};
</script>

<style lang="scss" scoped></style>
